<template>
  <div class="index-lists">
    <el-card class="!border-none" shadow="never">
      <el-form ref="formRef" class="mb-[-16px]" :model="queryParams2" :inline="true">
        <el-form-item label="所属分布" prop="ownershipDistribution">
          <el-select
              v-model="queryParams2.ownershipDistribution"
              class="w-[250px]"
              clearable
          >
            <el-option label="深圳" value="深圳" />
            <el-option label="上海" value="上海" />
            <el-option label="北京" value="北京" />
            <el-option label="长沙" value="长沙" />
          </el-select>
        </el-form-item>

        <el-form-item label="重要程度" label-width="180px" prop="importanceDegree">
          <el-select v-model="queryParams2.importanceDegree" class="w-[250px]" clearable>
            <el-option label="普通" value="普通" />
            <el-option label="重要" value="重要" />
            <el-option label="非常重要" value="非常重要" />
          </el-select>
        </el-form-item>
        <el-form-item label="甲方合同邮箱" prop="partyaEmail">
          <el-input class="w-[280px]" v-model="queryParams2.partyaEmail" />
        </el-form-item>
        <el-form-item label="合同官费总额" prop="totalContractFees">
          <el-input class="w-[250px]" v-model="queryParams2.totalContractFees" />
        </el-form-item>
        <el-form-item label="首付官费" label-width="180px" prop="putdownOfficialfee">
          <el-input class="w-[250px]" v-model="queryParams2.putdownOfficialfee" />
        </el-form-item>
        <el-form-item label="首付代理费" prop="putdownAgencyfee">
          <el-input class="w-[280px]" v-model="queryParams2.putdownAgencyfee" />
        </el-form-item>
        <el-form-item label="首付总额" prop="putdownRental">
          <el-input class="w-[250px]" v-model="queryParams2.putdownRental" />
        </el-form-item>
        <el-form-item label="长期付款方式" label-width="180px" prop="termOfPayment">
          <el-select v-model="queryParams2.termOfPayment" class="w-[250px]" clearable>
            <el-option label="银行卡" value="1" />
            <el-option label="微信" value="2" />
            <el-option label="支付宝" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="长期付款方式id" prop="termOfPaymentid">
          <el-input class="w-[280px]" v-model="queryParams2.termOfPaymentid" />
        </el-form-item>
        <el-form-item label="预付款" prop="advance">
          <el-input class="w-[250px]" v-model="queryParams2.advance" />
        </el-form-item>
        <el-form-item label="长期付款方式说明" label-width="180px" prop="termOfpaymentExplain">
          <el-input class="w-[250px]" v-model="queryParams2.termOfpaymentExplain" />
        </el-form-item>
        <el-form-item label="开票方式" prop="billingMethod">
          <el-select v-model="queryParams2.billingMethod" class="w-[280px]" clearable>
            <el-option label="先来款后开票" value="1" />
            <el-option label="后来款先开票" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发票抬头" prop="invoiceTitle">
          <el-input class="w-[250px]" v-model="queryParams2.invoiceTitle" />
        </el-form-item>
        <el-form-item label="发明件数" label-width="180px" prop="numberOfInventions">
          <el-input class="w-[250px]" v-model="queryParams2.numberOfInventions" />
        </el-form-item>
        <el-form-item label="发明代理费"  prop="inventionCommission">
          <el-input class="w-[280px]" v-model="queryParams2.inventionCommission" />
        </el-form-item>
        <el-form-item label="其他件数" prop="miscDigitalComponents">
          <el-input class="w-[250px]" v-model="queryParams2.miscDigitalComponents" />
        </el-form-item>
        <el-form-item label="其他代理费" label-width="180px" prop="otherAgencyFees">
          <el-input class="w-[250px]" v-model="queryParams2.otherAgencyFees" />
        </el-form-item>
        <el-form-item label="其他说明" prop="otherHelp">
          <el-input class="w-[280px]" v-model="queryParams2.otherHelp" />
        </el-form-item>
        <el-form-item label="合同摘要" prop="contractParticulars">
          <el-input class="w-[250px]" v-model="queryParams2.contractParticulars" />
        </el-form-item>
        <el-form-item label="乙方合同邮箱" label-width="180px" prop="partybEmail">
          <el-input class="w-[250px]" v-model="queryParams2.partybEmail" />
        </el-form-item>
        <el-form-item label="合同代理费总额" prop="contractAgencyFee">
          <el-input class="w-[280px]" v-model="queryParams2.contractAgencyFee" />
        </el-form-item>
        <el-form-item label="中间款官费" prop="intermediateOfficialFees">
          <el-input class="w-[250px]" v-model="queryParams2.intermediateOfficialFees" />
        </el-form-item>
        <el-form-item label="中间款代理费" label-width="180px" prop="intermediaryAgencyFee">
          <el-input class="w-[250px]" v-model="queryParams2.intermediaryAgencyFee" />
        </el-form-item>
        <el-form-item label="中间款总额" prop="totalIntermediateFunds">
          <el-input class="w-[280px]" v-model="queryParams2.totalIntermediateFunds" />
        </el-form-item>
        <el-form-item label="申请费缴费方式" prop="applicationPaymentMethod">
          <el-select
              v-model="queryParams2.applicationPaymentMethod"
              class="w-[250px]"
              clearable
          >
            <el-option label="不缴费" value="1" />
            <el-option label="定期结算" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否缓交实审费" label-width="180px" prop="isExaminationFee">
          <el-select v-model="queryParams2.isExaminationFee" class="w-[250px]" clearable>
            <el-option label="是" value="1" />
            <el-option label="否" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="代理费结算方式" prop="agencySettlementMethod">
          <el-select
              v-model="queryParams2.agencySettlementMethod"
              class="w-[280px]"
              clearable
          >
            <el-option label="不缴费" value="" />
            <el-option label="定期结算" value="" />
          </el-select>
        </el-form-item>
        <el-form-item label="双报件数" prop="numberDoubleReports">
          <el-input class="w-[250px]" v-model="queryParams2.numberDoubleReports" />
        </el-form-item>
        <el-form-item label="双报总代理费" label-width="180px" prop="doubleTotalAgency">
          <el-input class="w-[250px]" v-model="queryParams2.doubleTotalAgency" />
        </el-form-item>
        <el-form-item label="新型件数" prop="numberNewPieces">
          <el-input class="w-[280px]" v-model="queryParams2.numberNewPieces" />
        </el-form-item>
        <el-form-item label="新型代理费" prop="newAgencyFee">
          <el-input class="w-[250px]" v-model="queryParams2.newAgencyFee" />
        </el-form-item>
        <el-form-item label="申报区域" label-width="180px" prop="declarationArea">
          <el-input class="w-[250px]" v-model="queryParams2.declarationArea" />
        </el-form-item>
        <el-form-item label="申报期限" prop="declarationTerm">
          <daterange-picker
              v-model:startTime="queryParams2.declarationTermStart"
              v-model:endTime="queryParams2.declarationTermEnd"
          />
        </el-form-item>
        <el-form-item label="申报要求" prop="declarationRequirement">
          <el-input class="w-[250px]" v-model="queryParams2.declarationRequirement" />
        </el-form-item>
        <el-form-item label="收款账户" label-width="180px" prop="accountCredited">
          <el-select v-model="queryParams2.accountCredited" class="w-[250px]" clearable>
            <el-option label="1283" value="1" />
            <el-option label="测试" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="服务费标准" prop="serviceStandard">
          <el-input class="w-[280px]" v-model="queryParams2.serviceStandard" />
        </el-form-item>
        <el-form-item label="尾款官费" prop="finalOfficialFee">
          <el-input class="w-[250px]" v-model="queryParams2.finalOfficialFee" />
        </el-form-item>
        <el-form-item label="尾款代理费" label-width="180px" prop="finalAgencyFee">
          <el-input class="w-[250px]" v-model="queryParams2.finalAgencyFee" />
        </el-form-item>
        <el-form-item label="尾款总额" prop="balance">
          <el-input class="w-[280px]" v-model="queryParams2.balance" />
        </el-form-item>
        <el-form-item label="授权费缴费方式" prop="licensingPaymentMethod">
          <el-select
              v-model="queryParams2.licensingPaymentMethod"
              class="w-[250px]"
              clearable
          >
            <el-option label="不缴费" value="1" />
            <el-option label="定期结算" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="前三年年费缴费方式" label-width="180px" prop="firstthreePaymentMethod">
          <el-select
              v-model="queryParams2.firstthreePaymentMethod"
              class="w-[250px]"
              clearable
          >
            <el-option label="不缴费" value="1" />
            <el-option label="定期结算" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="双报发明代理费" prop="doubleInventionAgency">
          <el-input class="w-[280px]" v-model="queryParams2.doubleInventionAgency" />
        </el-form-item>
        <el-form-item label="双报新型代理费" prop="doubleReportAgency">
          <el-input class="w-[250px]" v-model="queryParams2.doubleReportAgency" />
        </el-form-item>
        <el-form-item label="外观件数" label-width="180px" prop="numberAppearancePieces">
          <el-input class="w-[250px]" v-model="queryParams2.numberAppearancePieces" />
        </el-form-item>
        <el-form-item label="外观代理费" prop="appearanceCommission">
          <el-input class="w-[280px]" v-model="queryParams2.appearanceCommission" />
        </el-form-item>
        <el-form-item label="项目顾问费" prop="projectConsultant">
          <el-input class="w-[250px]" v-model="queryParams2.projectConsultant" />
        </el-form-item>
        <el-form-item label="年费监管要求" label-width="180px" prop="annualRegulatoryRequirements">
          <el-input
              class="w-[250px]"
              v-model="queryParams2.annualRegulatoryRequirements"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="!border-none mt-4" shadow="never">
      <!-- <el-table
          class="mt-4"
          size="large"
          v-loading="pager.loading"
          :data="pager.lists"
      > -->
      <!-- <el-table-column label="操作" width="120" fixed="right">
              <template #default="{ row }">
                  <el-button
                      v-perms="['listContract:edit']"
                      type="primary"
                      link
                      @click="handleEdit(row)"
                  >
                      编辑
                  </el-button>
                  <el-button
                      v-perms="['listContract:del']"
                      type="danger"
                      link
                      @click="handleDelete(row.id)"
                  >
                      删除
                  </el-button>
              </template>
</el-table-column> -->
      <!-- </el-table> -->
      <!-- <div class="flex justify-end mt-4">
          <pagination v-model="pager" @change="getLists" />
      </div> -->
    </el-card>
    <!-- <edit-popup
        v-if="showEdit"
        ref="editRef"
        @success="getLists"
        @close="showEdit = false"
    /> -->
    <footer-btns>
      <div style="padding: 20px">
        <el-button v-perms="['listContract:add']" type="primary" @click="handleAdd()">
          <template #icon>
            <icon name="el-icon-Plus" />
          </template>
          新增
        </el-button>
        <el-button
            v-perms="['customerlist:add/edit']"
            type="primary"
            @click="preservation()"
        >
          <template #icon>
            <icon name="el-icon-FolderChecked" />
          </template>
          保存
        </el-button>
        <el-button @click="resetParams">重置</el-button>
      </div>
    </footer-btns>
  </div>
</template>
<script lang="ts" setup name="listContract">
import { listContractDelete, listContractLists,listContractAdd,listContractEdit } from '@/api/listContract'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import { reactive, watch, toRefs } from 'vue';
import {basicAdd, basicEdit} from "@/api/basic";
const emit = defineEmits(['success', 'close','updateExtend'])
// import EditPopup from './edit.vue'
import { useStore } from 'vuex';

const store = useStore();
// const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const showEdit = ref(false)
const queryParams2 = reactive({
  ownershipDistribution: '',
  ownershipDistributionId: '',
  importanceDegree: '',
  partyaEmail: '',
  totalContractFees: '',
  putdownOfficialfee: '',
  putdownAgencyfee: '',
  putdownRental: '',
  termOfPayment: '',
  termOfPaymentid: '',
  advance: '',
  termOfpaymentExplain: '',
  billingMethod: '',
  invoiceTitle: '',
  numberOfInventions: '',
  inventionCommission: '',
  miscDigitalComponents: '',
  otherAgencyFees: '',
  otherHelp: '',
  contractParticulars: '',
  partybEmail: '',
  contractAgencyFee: '',
  intermediateOfficialFees: '',
  intermediaryAgencyFee: '',
  totalIntermediateFunds: '',
  applicationPaymentMethod: '',
  applicationPaymentMethodid: '',
  isExaminationFee: '',
  agencySettlementMethod: '',
  agencySettlementMethodid: '',
  numberDoubleReports: '',
  doubleTotalAgency: '',
  numberNewPieces: '',
  newAgencyFee: '',
  declarationArea: '',
  declarationTermStart: '',
  declarationTermEnd: '',
  declarationRequirement: '',
  accountCredited: '',
  accountCreditedId: '',
  serviceStandard: '',
  finalOfficialFee: '',
  finalAgencyFee: '',
  balance: '',
  licensingPaymentMethod: '',
  firstthreePaymentMethod: '',
  doubleInventionAgency: '',
  doubleReportAgency: '',
  numberAppearancePieces: '',
  appearanceCommission: '',
  projectConsultant: '',
  annualRegulatoryRequirements: '',
  userId: '',
  updateUserId: '',
  updateUserName: '',
  userName: ''
})
const route = useRoute()

// 监听 queryParams 的变化，并通过 emit 发送变化的值到父组件
watch(queryParams2, (newValue) => {
  emit('updateExtend', newValue); // 每当 queryParams 变化时，发送新的值
}, { deep: true }); // 深度监听，确保子对象的变化也会被捕获

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: listContractLists,
  params: queryParams2
})

// 新增操作
const handleAdd = async () => {
  console.log(111)
  showEdit.value = true
  const data: any = { ...queryParams2 }
  console.log('data', data)
  if (route.query.id) {
    await listContractEdit(data)
  } else {
    console.log(data)
    await listContractAdd(data)
  }
  console.log(data)
  feedback.msgSuccess('操作成功')

  console.log(data,'提交成功')
  await nextTick()
  editRef.value?.open('add')
}
//点击保存方法
const preservation = async () => {
  showEdit.value = true
  const data: any = { ...queryParams2 }
  console.log('data', data)
  store.dispatch('setQueryParamsPage2', queryParams2);
  // 调用 Vuex 的 action 保存数据到本地存储
  await store.dispatch('saveCombinedDataToLocalStorage');
  feedback.msgSuccess('保存成功');
  console.log('保存操作完成');
}


// const handleEdit = async (data: any) => {
//     showEdit.value = true
//     await nextTick()
//     editRef.value?.open('edit')
//     editRef.value?.getDetail(data)
// }

const handleDelete = async (id: number) => {
  await feedback.confirm('确定要删除？')
  await listContractDelete({ id })
  feedback.msgSuccess('删除成功')
  getLists()
}

getLists()
</script>
